<template>
  <div class="details" ref="homePage">
    <div class="bj">
      <van-nav-bar title="订单详情" style="background: #68c5ba;width: 100%;">
        <van-icon name="arrow-left" slot="left" color="#FFFFFF" @click="returnto" />
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="details-box">
      <div class="delails-div">
        <div class="delails-first">
          <div class="delails-Secondary">
            <div>
              <span v-model="details_name">收件人:{{details_name}}</span>&#8194;
              <span v-model="details_phone">电话:{{details_phone}}</span>
            </div>
            <div style="display: flex;align-items: center;" @click="jumpshipping">
              <span style="color:#68c5ba;">获取收货地址</span>&#8194;
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="secondary-first">
            <span v-model="details_city">地址:{{details_city}}</span>
          </div>
        </div>
        <div class="specialty-first">
          <div class="specialty-secondary">
            <img :src="resdata.ShowImg" />
          </div>
          <div style="width: 65%;font-size: 14px;">
             <div style="height: 30px;color: #000000;">{{resdata.Name}}</div>
             <div v-if="resdata.Desc != '' ">
                <van-tag style="height: 30px;line-height: 30px;" color="#68C5BA">{{resdata.Desc}}</van-tag>
             </div>
           </div>
        </div>
        <div class="quantity_first">
          <div><span>购买数量</span></div>
          <div>
            <van-stepper v-model="details_value" min="1" max="5" @change="onchange"/>
          </div>
        </div>
        <div class="delivery-first">
          <div><span>配送服务：</span></div>
          <div style="display: flex;align-items: center;"><span>快递运输服务</span>&#8194;
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="commodity-first">
          <div style="display: flex;justify-content: space-between;height: 2.5rem;align-items: center;font-size: 14px;">
            <span>商品单价金额</span>
            <div style="color: #68c5ba;">￥<span>{{resdata.Price}}</span></div>
          </div>
          <div style="display: flex;justify-content: space-between;height: 2.5rem;align-items: center;font-size: 14px;">
            <span>快递费</span>
            <div style="color: #68c5ba;">￥<span>0</span></div>
          </div>
        </div>
        <!-- <div style="height: 1.875rem;"></div> -->
      </div>
    </div>
    <div class="details-bottom">
      <div style="display: flex;margin-left: 1.25rem;">
        <span>总价：</span>
        <div style="color: #68c5ba;">￥<span v-model="details_money">{{details_money}}</span></div>
      </div>
      <van-button type="default">微信支付</van-button>
    </div>
  </div>
</template>

<script>
  import {
     // specialtyDetails
   } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        details_value:'1',
        resdata:{},
        details_money:'',
        //接收保存过来的地址数据
        details_name:this.$route.query.name,
        details_phone:this.$route.query.phone,
        details_city:this.$route.query.city+this.$route.query.detailed,

      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.height = this.clientHeight + 'px';
      this.detailsdata();
    },
    methods:{
      jumpshipping(){//跳转收货地址shipping
        // this.$router.push('/shipping');
        this.$router.push({
          path: "/Me/addressList",
          query: {
            id: this.$route.query.id,

          }
        })
      },
      returnto(){//返回上一级
        this.$router.go(-1);
        // this.$router.push({
        //   path: "/specialty/Specialtydetails",
        //   // query: {
        //   //   id: this.$route.query.id,

        //   // }
        // })
      },
      onchange(details_value){//增加数量
        // let money = 100;
        let combined = details_value * this.resdata.Price;
        console.log(combined);
        this.details_money = combined;
      },
      detailsdata(){
         let data = {
            pSN: this.$route.query.id,//识别参数
         }
         specialtyDetails(data).then(res=>{
            console.log(res)
            this.resdata = res.Item
            this.details_money = res.Item.Price
            // this.images = res.Item.CoverImgs
         })
       },
    }

  }
</script>

<style lang="scss">
  .details {
    background: white;
   font-size: 14px;
   .bj{
     .van-icon {
       color: white !important;
   
     }
   }
    .details-box {
      width: 100%;
      // height: 200px;
      display: flex;
      justify-content: center;

      .delails-div {
        width: 95%;
        height: 100%;
        background: #f7f7f7;
        display: flex;
        justify-content: center;
        color: #969696;
        margin-top: 0.625rem;
        flex-wrap: wrap;

        .delails-first {
          width: 90%;
          font-size: 14px;
          display: flex;
          flex-direction: column;

          .delails-Secondary {
            display: flex;
            justify-content: space-between;
            height: 2.5rem;
            align-items: center;
          }

          .secondary-first {
            height: 1.875rem;
            border-bottom: 0.0625rem solid #e8e8e8;

          }
        }

        .specialty-first {
          width: 90%;
          height: 9.375rem;
          display: flex;
          ustify-content: center;
          align-items: center;
          border-bottom: 0.0625rem solid #e8e8e8;

          .specialty-secondary {
            width: 45%;
            height: 90%;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .quantity_first {
          width: 90%;
          height: 3.75rem;
          display: flex;
          font-size: 14px;
          justify-content: space-between;
          align-items: center;
          border-bottom: 0.0625rem solid #e8e8e8;
        }

        .delivery-first {
          width: 90%;
          height: 2.5rem;
          display: flex;
          align-items: center;
          font-size: 14px;
          justify-content: space-between;
          border-bottom: 1px solid #e8e8e8;
        }

        .commodity-first {
          width: 90%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
        }

      }
    }

    .details-bottom {
      position: fixed;
      display: flex;
      width: 100%;
      height: 3.75rem;
      bottom: 0;
      background: #f8f8f8;
      align-items: center;
      justify-content: space-between;

      .van-button {
        height: 100%;
        background: #68c5ba;
        color: white;
        width: 35%;
        border: none;
      }
    }
  }
</style>
